<template>
    <div class="box">
        <header>
             <i @click="back" class="iconfont">&#xe663;</i>
            <p>商家推荐</p>
        </header>
        <main>
            <div v-for="item,i in tJFood" :key="i" @click="xiang($event,item)">
                <img :src="$image+item.food_img" alt="">
                <p>{{item.name}}</p>
                <i>开始的放假</i>
                <dl>月售:23</dl>
                 <div class="fen">
                    <p style="color:red;">￥<span style="font-size:15px">{{item.price}}</span></p>
                    <van-icon name="add" size="20px" color="#0000f8" />
                </div>
            </div>
        </main>
        <footer>
           <Footer :Msg="msg"></Footer>
        </footer>
    </div>
</template>

<script>
import {mapState} from 'vuex'
import Footer from '../components/footerCar'
import {ajax_tjFood} from '../ajax/index.js'
export default {
    name: '',
    data(){
        return{
          tJFood:[],
          msg:[],
        }
    },
    methods:{
      back(){
          this.$router.push('/')
      },
      xiang(e,item){
        //   console.log(item);
        //   this.$router.push(`/xiangQing?content=${JSON.stringify(item)}`)
        //   console.log(e.target)
          if(e.target.tagName!=='I'){
            //   console.log(e.target)
                this.$router.push({
                    path:'/xiangQing',
                    name:'详情',
                    params:{
                        name:'信息',
                        data:item
                    }
          })
          }else if(e.target.offsetParent.className=='fen'&&e.target.tagName=="I"){
            //  console.log("fei")
            this.msg.push(item)
            // console.log(this.msg)
          }
       
        }
    },
    computed:{
        ...mapState(["car"])
    },
    components:{
        Footer
    },
    created(){
        ajax_tjFood({
            food_lei:'推荐'
        }).then(res=>{
            this.tJFood=res.data;
            // console.log(res)
        }),
        this.msg=this.car
    }
}
</script>

<style scoped>
.box{
    position:relative;
    width: 100vw;
    height:100vh;
    background-color: white;
    z-index: 10000;
    border: 0;
}
header{
    width: 96vw;
    margin: 0 auto;
    text-align: center;
    /* display: flex; */
    padding: 2vw;
    /* position: relative; */
    color: white;
    background-image:radial-gradient(at top right,orange,rgb(174, 0, 255),red,orange);
    position: fixed;
    top: 0;
    z-index: 1000;
}
header>i{
    /* margin-left: ; */
    position: absolute;
    top: 0vw;
    left: 0vw;
    padding: 2vw;
}
main{
    /* margin-top: 10vh; */
    width: 100vw;
    margin: 4.8vh auto;
    /* padding: 2vw; */
    display: flex;
    flex-wrap: wrap;
    background-color: rgb(231, 229, 229);
}
main>div{
    width: calc((100% - 10vw)/2);
    margin-left: 2vw;
    margin-top: 2vw;
    padding: 1vw;
    background-color: white;
    background-image: linear-gradient(to top right,white 50%,rgb(197, 193, 193),orange);
    border-radius: 5px;
    position: relative;
    padding-bottom: 10vw;
}
main img{
    width: 100%;
    height: 24vh;
}
main>div>p{
    font-size: 16px;
    /* font-weight: 550; */
    font-family: "楷体";
    margin: .8vw 0;
    /* font-family: "微软雅黑"; */
}
main i{
    font-style: normal;
    font-size: 13px;
    color: gray;
}
main dl{
    color: gray;
    font-size: 13px;
    margin-top: .5vw;
}
.fen{
   
    margin: .4vw 0;
   
    position: absolute;
    bottom: 2vw;
     display: flex;
      justify-content: space-between;
}
.fen>p{
    font-size: 12px;
    margin-right: 30vw;
}
footer{
    position: fixed;
    bottom: 0;
    z-index: 1000;
}
footer>div{
    width: 96vw;
    background-color: white;
    padding: 1.8vw 2vw;
    
}
footer button{
    position: absolute;
    right: 0;
    bottom: 0;
    width: 24vw;
    height: 100%;
    outline: none;
    border: none;
    background-color: chartreuse;
}
</style>